<%@ include file="/common.jsp"%>  
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<title>酱出名门人事工资管理平台</title>

		<link type="text/css"
			href="${ctx}/js/dhtmlxTree/dhtmlxtree.css" rel="stylesheet" />
		<script type="text/javascript" src="${ctx}/js/dhtmlxTree/dhtmlxcommon.js"></script>
		<script type="text/javascript" src="${ctx}/js/dhtmlxTree/dhtmlxtree.js"></script>
		<script type="text/javascript" src="${ctx}/js/pageing.js"></script>
	</head>

	<BODY>
		<div class="main">
			<%@include file="/head.jsp"%>
			<div class="nav">
				<ul>
					<li>
						<a href="deptAction.action">部门管理</a>
					</li>
					<li class="nav_pic"></li>	
					<li>
						<a >添加部门</a>
					</li>
					<li class="nav_pic"></li>						
				</ul>
				
			
			</div>
		
	 <div class="center" >
	  
		<s:form action="deptAction!add.action" theme="simple" onsubmit="return deptAdd()">
		 <table>
		 	<tr><td><label>名称:</label></td><td><s:textfield name="department.name" ></s:textfield></td></tr>

			<tr><td><label>区域:</label></td><td>
			
			<input name="areaName" value="${area.name}" readonly="true"></input>
		    </td></tr>
			<tr><td><label>岗位:</label></td><td><s:textfield name="workPositionNames" readonly="true"></s:textfield></td></tr>
			<tr><td><label>备注:</label></td><td><s:textarea name="department.remark" 
			rows="3" cssStyle="width:200px;margin-top: 10px;font-size:12px;"
			></s:textarea></td>
			</tr>
			<tr><td></td><td><s:submit value="提交" cssStyle="width:60px" ></s:submit>
			<s:reset value="重置" cssStyle="width:60px;margin-left: 5px" ></s:reset></td></tr>
		</table>
		<s:hidden name="department.areaId" ></s:hidden>
		<input type="hidden" name="department.fatherId" value="${fatherId}" ></input>
		<s:hidden name="workPositionIds" ></s:hidden>
		</s:form>
	</div>

	<div class="clear"></div>
			<div class="footer">
				酱出名门人事工资管理平台 版权所有
			</div>
		</div>

		
		<div id="dialogAreaList" title="请选择区域" style="display: none">
			<ul  style="list-style-type: none;margin: 0px;width: 100%" >
			</ul>
		</div>
		<div id="dialogAllotWP" title="分配岗位" style="display: none">
			<table id="tableAllotWP" style="width: 100%;">
		        <tbody>
			    </tbody>
			</table>   
		    <div style="float:left;margin-left:22px; width: 98%">  
				<div style='float: left; line-height: 28px;vertical-align: middle'>
						<span id="page_info"></span>
                    	<a id="page_first" herf="#">首页</a> 
                     	<a id="page_prev" herf="#">上一页</a> 
                        <a id="page_next" herf="#">下一页</a> 
                        <a id="page_last" herf="#">尾页</a>
                        <input id="page_num" type="text" class="text ui-widget-content ui-corner-all" style="height:24px;line-height:24px;width:20px;padding: 0px">
                        <a id="page_goto" herf="#">转</a> 
			   </div>
		    </div>			
			
		</div>		
	</body>
	
	<script type="text/javascript" >
	var pageObjRef = new pageObj(findWPByPage);

	$(function(){

		$('#dialogAreaList').dialog({
			autoOpen: false,
			width: 200,
			modal: true,
			buttons: {
				"确定": function() {

			        var areaId = $("input[name='checkArea']:checked").val();
			        $("input[name='department.areaId']").val(areaId);
			        $("input[name='areaName']").val($("input[name='checkArea']:checked").data("areaName"));
					$( this ).dialog( "close" );
				},
				"取消": function() {
					$( this ).dialog( "close" );
				}
			}
		});   



        var isSelected = false;
		$('#dialogAllotWP').dialog({
			autoOpen: false,
			width: 600,
			
			modal: true,
			buttons: {
				"确定": function() {
					isSelected = true;
					$( this ).dialog("close");
				},
				"取消": function() {
					isSelected = false;
					$( this ).dialog("close");
				}
			},
			close:function(event, ui) {
            	var wpIds = $("input[name='workPositionNames']").data("wpIds");
            	var wpNames = $("input[name='workPositionNames']").data("wpNames");
            	//alert(isSelected);
				if (isSelected) {
		    	    $("input[name='workPositionNames']")
		    	    	.data("firstWpIds", wpIds.concat())
		    	    	.data("firstWpNames", wpNames.concat());
		    	   
			    } else {
			    	wpIds =  $("input[name='workPositionNames']").data("firstWpIds");
			    	wpNames = $("input[name='workPositionNames']").data("firstWpNames");
		    	    $("input[name='workPositionNames']")
		    	        .data("wpIds", wpIds.concat())
    	    			.data("wpNames", wpNames.concat());

	    	    	
				}
				//alert(JSON.stringify(wpIds));
				$("input[name='workPositionNames']").val(wpNames.join(";"));
				$("input[name='workPositionIds']").val(JSON.stringify(wpIds));
            	isSelected = false;
				
		    }

		
		});  			

		$("input[name='workPositionNames']").click(allotWP); 
 	    $("input[name='workPositionNames']").data("wpIds", new Array())
  			.data("wpNames", new Array())
  			.data("firstWpIds",  new Array())
  			.data("firstWpNames",  new Array());



		
	});  		

    if ($("input[name='department.fatherId']").val() == -1) {
        $("input[name='areaName']").click(findAllArea);
    } else {
        $("input[name='areaName']").unbind(); 
    }

    function deptAdd() {
        var name = $.trim($("input[name='department.name']").val());
        if (name == "") {
            alert("部门名称不能为空!");
            return false;
        }
        
        var areaId = $.trim($("input[name='department.areaId']").val());
        if (areaId == "") {
            alert("请选择一个区域!");
            return false;
        }
        
        return true;
    }



    function allotWP() {
 	   pageObjRef.findByPage(0);
    }



    function showWPS(datas) {
 	   $("#tableAllotWP tbody tr").remove();
 	   var wpIds = $("input[name='workPositionNames']").data("wpIds");
        
       var mworkPositions = datas.items;
 	   
 	   $.each(mworkPositions, function(i, item){  
 		   var tr = $("<tr></tr>");
 		    
            var td = "<td></td>";
     
            var checkbox = $("<input type='checkbox' />");
            checkbox.data("selectId", item.wpId);
            checkbox.data("selectName", item.name);
            if ($.inArray(item.wpId, wpIds) != -1) {
         	   checkbox.attr("checked", "checked");
            }  
            checkbox.click(function () {
         	   var wpIds = $("input[name='workPositionNames']").data("wpIds");
         	   var wpNames = $("input[name='workPositionNames']").data("wpNames");
			       if ($(this).attr("checked")) {
	            	   if ($.inArray($(this).data("selectId") ,wpIds) == -1) {
	            		   wpIds.push(item.wpId);
	            		   wpNames.push(checkbox.data("selectName"));
	                   }
				   } else {
					   var index = 	$.inArray($(this).data("selectId"),  wpIds);
					   if (index >= 0) {
						   wpIds.splice(index, 1);
						   wpNames.splice(index, 1);
					   }
				   }				   
            }); 

            
            
            tr.append($(td).html(item.name)).data("index", i);
            tr.append($(td).html(item.performanceScore));
            tr.append($(td).append(checkbox));           
            $("#tableAllotWP tbody").append(tr);
 	   });


 	   pageObjRef.setPageBtnClick(datas);
 	   pageObjRef.setPageInfo(datas);
 	   
  	   $('#dialogAllotWP').dialog('open');
        
    }


	function findWPByPage(startIndex) {		   
		pageObjRef.startIndex = startIndex;

		$.ajax({
			type : "POST",
			url : "workPositionAction!findByPage.action?departmentId=",
			data : "paginationJson=" + JSON.stringify(pageObjRef)
				+  "&findByPageType=2"
				+  "&timestamp=" + new Date().getTime(),
			success : function(msg) {
				findByPageCallback(msg);
			},
			error : function(textStatus) {
				alert("网络异常请稍后重试!");
			}});
	   }
    
    function findByPageCallback(msg) {
        switch (msg.status.code) {
        case "SUCCES" :
     	   showWPS(msg.datas);
            break;
        case "FAIL" :
        	alert(msg.status.message);
            break;
        case "EMPTY" :
        	alert(msg.status.message);
            break;    
        }
    }
    
    function findAllArea() {
		$.ajax( {
			type : "GET",
			url : "areaAction!findAllArea.action",
			success : function(msg) {
				findAllAreaCallback(msg);
			},
			error : function(textStatus) {
				alert("网络异常请稍后重试!");
			}
		});
  }

  function findAllAreaCallback(msg) {
      switch (msg.status.code) {
      case "SUCCES" :
    	  showAreas(msg.datas);
          break;
      default :
      	 alert(msg.status.message);
         break; 
      }
  } 

  function showAreas(datas) {
	  	$("#dialogAreaList ul").html("");

     	var areaId =  $("input[name='department.areaId']").val();
	  	for ( var i = 0; i < datas.length; i++) {
       	var li = $("<li ></li>"); 
       	var input;
       	if (datas[i].areaId == areaId) {
       		input = $("<input type='radio' name='checkArea' checked='checked'/>");
         } else {
         	input = $("<input type='radio' name='checkArea' />");
         }
       	input.data("areaName", datas[i].name);
		  	input.val(datas[i].areaId);
		  	var label = $("<label></label>")
		  	label.html(datas[i].name);
         li.append(input).append(label);
		  	$("#dialogAreaList ul").append(li);
	  	}

	 	$('#dialogAreaList').dialog('open'); 
	 	return false;  
 	 }  
    
	</script>
</html>	
